﻿@using System.Configuration
@using NTQOnlineExam.Services.Infrastructure.MVC
@model NTQOnlineExamFrontend.Models.ContactViewModel

@{
    ViewBag.Title = "Contact Us";
    Layout = "~/Views/Shared/_Content.cshtml";
}

<div class="col-sm-12 margin-bottom-20">
    <p>If you would like any more information about us and what we do, please do not hesitate to contact us and we will get back to you within 48 hours. </p>
    <p>
        We look forward to hearing from you.
    </p>
    <p><strong>Email:</strong> <a href='mailto:@ConfigurationManager.AppSettings["ContactSupportEmail"]'>@ConfigurationManager.AppSettings["ContactSupportEmail"]</a></p>
</div>
<div class="col-sm-12 margin-top-10">
</div>

<div class="col-sm-12">
    @using (Ajax.BeginForm("RequestContact", "Content", new { }, new AjaxOptions
{
    OnBegin = "Contact.OnBegin",
    OnSuccess = "Contact.OnSuccessed",
    OnFailure = "Contact.OnFailed",
    HttpMethod = "Post"

}, new { role = "form", id = "contact-form" }))
    { 
        <div class="info-board info-board-red error-panel clear-both" id="contact-errorPanel">
            <button type="button" class="close">×</button>
            <ul>
                <li>@this.LocalResources("FailureMessage")</li>
            </ul>
        </div>
        <div id="contact-successPanel" class="info-board info-board-blue clear-both">
            <button type="button" class="close">×</button>
            <ul>
                <li>@this.LocalResources("SuccessMessage")</li>
            </ul>
        </div>
        <div class="form-group">
            <label for="Email">@this.LocalResources("YourEmail")</label>
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "Enter email" })
            @Html.ValidationMessageFor(m => m.Email)
        </div>
        <div class="form-group">
            <label for="Name">@this.LocalResources("YourName")</label>
            @Html.TextBoxFor(m => m.Name, new { @class = "form-control", placeholder = "Enter name" })
            @Html.ValidationMessageFor(m => m.Name)
        </div>
        <div class="form-group">
            <label for="Message">@this.LocalResources("YourMessage")</label>
            @Html.TextAreaFor(m => m.Message, new { @class = "form-control", rows = "2", placeholder = "Enter message" })
            @Html.ValidationMessageFor(m => m.Message)
        </div>
        <div class="form-group">
            <label id="captcha-label" for="auth-captcha">@this.LocalResources("ValidationMath")</label>
            <div class="info-notify">
                @this.LocalResources("ValidationMathDescription")
            </div>
            <span class="field-validation-error" data-valmsg-replace="true" data-valmsg-for="auth-captcha-math">
                <span id="validate-for-captcha" for="auth-captcha-math"></span>
            </span>
        </div>
        <button type="submit" class="btn btn-lg btn-red" id="contact-send-button">Send Request</button>
    }

</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#contact-successPanel").hide();
        $("#contact-errorPanel").hide();
        Contact.Init();
    });

    var Contact = new function () {

        this.Init = function () {
            var mathenticate = {
                bounds: {
                    lower: 5,
                    upper: 50
                },
                first: 0,
                second: 0,
                generate: function () {
                    this.first = Math.floor(Math.random() * this.bounds.lower) + 1;
                    this.second = Math.floor(Math.random() * this.bounds.upper) + 1;
                },
                show: function () {
                    return this.first + ' + ' + this.second;
                },
                solve: function () {
                    return this.first + this.second;
                }
            };
            mathenticate.generate();

            var $auth = $('<input type="text" class="form-control" name="auth" id="auth-captcha-math" />');
            $auth
                .attr('placeholder', mathenticate.show())
                .insertAfter('#captcha-label');

            $('#contact-form').on('submit', function (e) {
                e.preventDefault();
                if ($auth.val() != mathenticate.solve()) {
                    $("#validate-for-captcha").html('@this.LocalResources("ValidationMathError")');
                        return false;
                    }
            });

        };
        this.OnBegin = function () {
            $("#validate-for-captcha").html('');
            $("#contact-send-button").text("Sending ...");
        };
        this.OnSuccessed = function (response) {
            $("#contact-send-button").text("Send Request");
            if (!response.IsError && response.Data.Success) {
                $("#contact-errorPanel").hide();
                $("#contact-successPanel").show();
                $("#contact-successPanel").addClass("info-panel");
            } else {
                $("#contact-errorPanel").show();
                $("#contact-successPanel").hide();
                $("#contact-successPanel").removeClass("info-panel");
            }
        };

        this.OnFailed = function (jsonData) {
            $("#contact-send-button").text("Send Request");
            $("#contact-errorPanel").show();
            $("#contact-successPanel").hide();
            $("#contact-successPanel").removeClass("info-panel");
        };

    };

</script>
